<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
<link rel="stylesheet" type="text/css"
	href="../../css/themes/default.css" id="skin-switcher">
<link rel="stylesheet" type="text/css" href="../../css/responsive.css">
<link href="../../font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<link rel="stylesheet" type="text/css"
	href="../../js/ztree/bootstrapStyle.css">
</head>
<body>
	<header class="navbar clearfix" id="header"> </header>
	<!-- PAGE -->
	<section id="page">
		<!-- SIDEBAR -->
		<div id="sidebar" class="sidebar">
			<div class="sidebar-menu nav-collapse">
				<!-- SIDEBAR MENU -->
				<ul>
				</ul>
				<!-- /SIDEBAR MENU -->
			</div>
		</div>
		<!-- /SIDEBAR -->
		<div id="main-content">
			<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row" style="height: 30px;">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- STYLER -->
									<!-- /STYLER -->
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li><i class="fa fa-home"></i> <a href="../index.html">首页</a>
										</li>
										<li><a href="#">合同管理</a></li>
										<li>商品分类</li>
									</ul>
									<!-- /BREADCRUMBS -->
								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->
						<div class="row">
							<!-- TABLES -->
							<div class="col-md-12">
								<div class="form-group mrg-bt10">
									<a class="btn btn-success config create">
										<i class="fa fa-plus-square-o"></i> 新增一级分类
									</a>
								</div>
								<!-- BOX -->
								<div class="box border primary">
									<ul id="treeDemo" class="ztree"></ul>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /TABLES -->
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
	<!-- JQUERY UI-->
	<script
		src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript"
		src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- AUTOSIZE -->
	<script type="text/javascript"
		src="../../js/autosize/jquery.autosize.min.js"></script>
	<!-- INPUT MASK -->
	<script type="text/javascript"
		src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
	<!-- SELECT2 -->
	<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript"
		src="../../js/uniform/jquery.uniform.min.js"></script>
	<script type="text/javascript"
		src="../../js/ztree/jquery.ztree.core.js"></script>
	<script type="text/javascript"
		src="../../js/ztree/jquery.ztree.excheck.js"></script>
	<script type="text/javascript"
		src="../../js/ztree/jquery.ztree.exedit.js"></script>
	<!--bootbox-->
	<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript"
		src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="../../js/script.js"></script>
	<script src="../../js/common.js"></script>
	<script>
	var Group=function(){
		var setting, zNodes, zTree;
		var initCategoryTree = function(){
			zNodes = [];
			$.get(App.getContextPath() + "admin/category/searchCategory.do", function(result) {
				if (result.type == 'success' && result.extra != null) {
					$(result.extra).each(function(index, item){
						zNodes.push({id: item.id, pId: item.parentId, name: item.categoryName, open: (item.level === 1)});
					});
					zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
				}
			});
		}
		var addHoverDom = function(treeId, treeNode) {
			//在addHoverDom中推断第2级的节点不要显示“新增”button
			if (treeNode.level === 2) {
				return false;
			} else {
				//给节点加入"新增"button
				var sObj = $("#" + treeNode.tId + "_span");
				if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) {
					return;
				}
				var addStr = "<span class='button add' id='addBtn_" + treeNode.id
					+ "' title='新增分类' onfocus='this.blur();'></span>";
				sObj.after(addStr);
				var btn = $("#addBtn_"+treeNode.id);
				if (btn) {
					btn.bind("click", function(){
						var node = zTree.addNodes(treeNode, {id: (null), pId: treeNode.id, name: "", open: true});
						zTree.editName(node[0]);
						return false;
					});
				}
			}
		}
		var removeHoverDom = function(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
		}
		var tempNodeName = "";
		var beforeRename = function(treeId, treeNode, newName, isCancel) {
			tempNodeName = treeNode.name;
			return true;
		}
		var onRename = function(event, treeId, treeNode, isCancel) {
			if (treeNode.id) {
				renameCategory(treeNode);
			} else {
				saveCategory(treeNode);
			}
		}
		var renameCategory = function(treeNode) {
			if (treeNode.name == '' || treeNode.name == tempNodeName) {
				treeNode.name = tempNodeName;
				zTree.updateNode(treeNode);
				return;
			}
			var parentId = treeNode.pId == null ? 0 : treeNode.pId;
			$.post(App.getContextPath() + "admin/category/renameCategory.do", {id: treeNode.id, parentId: parentId, categoryName: treeNode.name}, function(result) {
				if (result.type != 'success') {
					$.alert(result.content);
					treeNode.name = tempNodeName;
					zTree.updateNode(treeNode);
				}
			});
		}
		var saveCategory = function(treeNode) {
			if (treeNode.name == '') {
				zTree.removeNode(treeNode);
				return;
			}
			var parentId = treeNode.pId == null ? 0 : treeNode.pId;
			var category = {categoryName: treeNode.name, parentId: parentId, level: (treeNode.level + 1), sortNum: (zTree.getNodeIndex(treeNode) + 1)};
			$.post(App.getContextPath() + "admin/category/saveCategory.do", category, function(result) {
				if (result.type != 'success') {
					$.alert(result.content);
					zTree.removeNode(treeNode);
				} else {
					treeNode.id = result.extra.id;
					zTree.updateNode(treeNode);
				}
			});
		}
		var beforeRemove = function(treeId, treeNode) {
			$.confirm("确认删除【" + treeNode.name + "】分类吗？", function(){
				$.post(App.getContextPath() + "admin/category/delCategory.do",{id: treeNode.id},function(result) {
					if (result.type != 'success') {
						$.alert(result.content);
					} else {
						zTree.removeNode(treeNode);
					}
				});
			});
			return false;
		}
		var addFirstLevel = function() {
			var node = zTree.addNodes(null, {id: (null), pId: 0, name: "", open: true});
			zTree.editName(node[0]);
		}
		return {
			init: function() {
				setting = {
			    		view: {
			            	addHoverDom: addHoverDom,
			            	removeHoverDom: removeHoverDom,
			            	selectedMulti: false,
			    		},
			         	check: {
			            	enable: false
			            },
			            data: {
			                simpleData: {
			                    enable: true
			                }
			            },
			            edit: {
			                enable: true, 
			                drag: false,
			    			removeTitle: "删除分类",
			    			renameTitle: "编辑分类名称"
			            },
			            callback: {
							beforeRemove: beforeRemove,
							beforeRename: beforeRename,
			    			onRename: onRename
						}
			        };
				initCategoryTree();
				$(".create").click(addFirstLevel);
			}
		}
	}();
	 
	$(function(){
		$("#header").load("../head.html");
		App.init();
		Group.init();
	});
	</script>
	<!-- /JAVASCRIPTS -->
</body>
</html>